<template>
  <div>
    <table
      border="1"
      bordercolor="black"
      width="100%"
      cellspacing="20"
      cellpadding="20"
      style="border: 1px solid #e8e8e8"
      id="table"
    >
      <thead>
        <tr>
          <th>项目名称</th>
          <th>状态</th>
          <th>负责人</th>
          <th>计划周期</th>
          <th>实际周期</th>
          <th>2020年 11月</th>
          <th>2020年 12月</th>
        </tr>
      </thead>

      <tr>
        <td style="max-width: 200px">
          国网眉山供电公司201935kv及以上输电运维服务国网眉山供电公司201935kv及以上输电运维服务国网眉山供电公司201935kv及以上输电运维服务国网眉山供电公司201935kv及以上输电运维服务国网眉山供电公司201935kv及以上输电运维服务
        </td>
        <td style="width: 50px">
          <div class="status">正常</div>
        </td>
        <td style="width: 100px">
          <a-avatar size="large" style="background-color: #40e0c3; color: #fff">
            张三-1
          </a-avatar>
        </td>
        <td style="width: 100px">280天</td>
        <td style="width: 100px">280天</td>
        <td rowspan="6" colspan="2" style="padding: 0">
          <div style="text-align: center">
            <a-spin tip="Loading..." :spinning="spinning">
              <div style="margin-top: 0px" id="chart"></div>
            </a-spin>
          </div>
        </td>
      </tr>

      <tr v-for="index in 5" :key="index">
        <td style="max-width: 200px">
          国网眉山供电公司201935kv及以上输电运维服务国网眉山供电公司201935kv及以上输电运维服务国网眉山供电公司201935kv及以上输电运维服务国网眉山供电公司201935kv及以上输电运维服务国网眉山供电公司201935kv及以上输电运维服务
        </td>
        <td style="width: 50px">
          <div
            class="status"
            :style="{
              color: index % 2 == 0 ? '#36E2C3' : '#B86A6A',
              background: index % 2 == 0 ? '#E4FEF9' : '#FFEFEF',
            }"
          >
            {{ index % 2 == 0 ? "正常" : "已逾期" }}
          </div>
        </td>
        <td style="width: 100px">
          <a-avatar
            size="large"
            :style="{
              color: '#FFF',
              background: index % 2 == 1 ? '#9072D9' : '#40E0C3',
            }"
          >
            张三-{{ index + 1 }}
          </a-avatar>
        </td>
        <td style="width: 100px">{{ 280 + index }}天</td>
        <td style="width: 100px">{{ 280 + index }}天</td>
      </tr>
    </table>
  </div>
</template>

<script>
var echarts = require("echarts");
const colorData = [
  "#40E0C3",
  "#FA8888",
  "#F4D66D",
  "#A9E072",
  "#409EFF",
  "#67C23A",
];
export default {
  data() {
    return {
      spinning: true,
    };
  },
  mounted() {
    // 获取表格的宽度高度
    var tdChart = document.getElementById("table");
    // console.log("clientWidth"+tdChart.clientWidth)
    // console.log("clientHeight"+tdChart.clientHeight)
    // 设置charts的宽高
    var charts = document.getElementById("chart");
    charts.style.height = tdChart.clientHeight + "px";
    charts.style.width = tdChart.clientWidth - 750 + "px";

    // this.$refs.analysisPoupRef.visible = true;
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("chart"));
    var option = {
      // title: {
      //   text: "深圳月最低生活费组成（单位:元）",
      //   subtext: "From ExcelHome",
      //   sublink: "http://e.weibo.com/1341556070/AjQH99che",
      // },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
        // formatter: function (params) {
        //   var tar = params[1];
        //   return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
        // },
      },
      grid: {
        left: "0%",
        right: "0%",
        bottom: "0%",
        top: "0%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        axisLabel: {
          show: false,
        },
        splitLine: { show: false },
      },
      yAxis: {
        type: "category",
        splitLine: { show: true },
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        data: ["总费用", "房租", "水电费", "交通费", "伙食费", "日用品数"],
      },
      series: [
        {
          name: "开始时间",
          type: "bar",
          stack: "总量",
          itemStyle: {
            barBorderColor: "rgba(0,0,0,0)",
            color: "rgba(0,0,0,0)",
          },
          emphasis: {
            itemStyle: {
              barBorderColor: "rgba(0,0,0,0)",
              color: "rgba(0,0,0,0)",
            },
          },
          // 设置开始日期
          data: [0, 1500, 1400, 1200, 300, 0],
        },
        {
          name: "立项时间",
          type: "bar",
          stack: "总量",
          markLine: {
            data: [
              {
                name: "Y 轴值为 100 的水平线",
                xAxis: 4000,
              },
            ],

            lineStyle: {
              color: "#E62929",
            },
            label: {
              color: "#E62929",
              position: "middle",
              formatter: function (e) {
                console.log(e);
                console.log(111111);
                return "今天(" + new Date().toLocaleString() + ")";
              },
            },
          },
          label: {
            show: true,
            position: "right",
            color: "rgba(231, 3, 3, 1)",
            borderColor: "#FFFFFF",
            offset: [-5, -25],
            align: "center",
            // backgroundColor: "#B1B5B5",
            // width: 100,
            // height: 30,
            borderRadius: [3, 1, 1, 1],
            formatter: function (e) {
              console.log(e.data);
              // let data = e.data;
              let data = "立项时间11-06";
              let data1 = "";
              // return `{a|${data}}`;
              return `{a|${data}}\n{b|${data1}}`;
              // console.log(data)
              // return '立项时间11-06'
            },
            rich: {
              a: {
                color: "#fff",
                align: "center",
                height: "25",
                width: 80,
                backgroundColor: "#B1B5B5",
                shadowColor: "rgb(177 181 181)",
                fontSize: 10,
                shadowBlur: 10,
                shadowOffsetX: 0.1,
                shadowOffsetY: 0.1,
              },
              b: {
                width: 10,
                height: 10,
                align: "center",
                backgroundColor: {
                  image:
                    "",
                },
              },
            },
          },
          itemStyle: {
            normal: {
              barBorderRadius: [30, 0, 0, 30],
              color: function (item) {
                return colorData[item.dataIndex];
              },
            },
          },
          barWidth: 10,
          data: [2900, 1200, 500, 800, 900, 300],
        },
        {
          name: "实施时间",
          type: "bar",
          stack: "总量",
          label: {
            show: true,
            position: "right",
            color: "rgba(231, 3, 3, 1)",
            borderColor: "#FFFFFF",
            offset: [-5, 25],
            align: "center",
            // backgroundColor: "#B1B5B5",
            // width: 100,
            // height: 30,
            borderRadius: [3, 1, 1, 1],

            formatter: function (e) {
              console.log(e.data);
              // let data = e.data;
              let data = "实施时间11-15";
              let data1 = "";
              // return `{a|${data}}`;
              return `{a|${data1}}\n{b|${data}}`;
              // console.log(data)
              // return '立项时间11-06'
            },
            rich: {
              b: {
                color: "#fff",
                align: "center",
                height: "25",
                width: 80,
                backgroundColor: "#B1B5B5",
                shadowColor: "rgb(177 181 181)",
                fontSize: 10,
                shadowBlur: 10,
                shadowOffsetX: 0.1,
                shadowOffsetY: 0.1,
              },
              a: {
                width: 10,
                height: 10,
                backgroundColor: {
                  image:
                    "",
                },
              },
            },
          },
          itemStyle: {
            normal: {
              barBorderRadius: [0, 0, 0, 0],
              color: function (item) {
                return colorData[item.dataIndex];
              },
            },
          },
          barWidth: 20,
          data: [400, 600, 300, 500, 500, 200],
        },
        {
          name: "现场实施",
          type: "bar",
          stack: "总量",
          label: {
            show: true,
            position: "right",
            color: "rgba(231, 3, 3, 1)",
            borderColor: "#FFFFFF",
            offset: [-5, -25],
            align: "center",
            // backgroundColor: "#B1B5B5",
            // width: 100,
            // height: 30,
            borderRadius: [3, 1, 1, 1],
            formatter: function (e) {
              console.log(e.data);
              // let data = e.data;
              let data = "现场实施12-20";
              let data1 = "";
              // return `{a|${data}}`;
              return `{a|${data}}\n{b|${data1}}`;
              // console.log(data)
              // return '立项时间11-06'
            },
            rich: {
              a: {
                color: "#fff",
                align: "center",
                height: "25",
                width: 80,
                backgroundColor: "#B1B5B5",
                shadowColor: "rgb(177 181 181)",
                fontSize: 10,
                shadowBlur: 10,
                shadowOffsetX: 0.1,
                shadowOffsetY: 0.1,
              },
              b: {
                width: 10,
                height: 10,
                align: "center",
                backgroundColor: {
                  image:
                    "",
                },
              },
            },
          },
          itemStyle: {
            normal: {
              barBorderRadius: [0, 0, 0, 0],
              color: function (item) {
                return colorData[item.dataIndex];
              },
            },
          },
          barWidth: 10,
          data: [2900, 1200, 300, 500, 900, 700],
        },
        {
          name: "完结时间",
          type: "bar",
          stack: "总量",
          label: {
            show: true,
            position: "right",
            color: "rgba(231, 3, 3, 1)",
            borderColor: "#FFFFFF",
            offset: [-5, 25],
            align: "center",
            // backgroundColor: "#B1B5B5",
            // width: 100,
            // height: 30,
            borderRadius: [3, 1, 1, 1],

            formatter: function (e) {
              console.log(e.data);
              // let data = e.data;
              let data = "完结时间12-23";
              let data1 = "";
              // return `{a|${data}}`;
              return `{a|${data1}}\n{b|${data}}`;
              // console.log(data)
              // return '立项时间11-06'
            },
            rich: {
              b: {
                color: "#fff",
                align: "center",
                height: "25",
                width: 80,
                backgroundColor: "#B1B5B5",
                shadowColor: "rgb(177 181 181)",
                fontSize: 10,
                shadowBlur: 10,
                shadowOffsetX: 0.1,
                shadowOffsetY: 0.1,
              },
              a: {
                width: 10,
                height: 10,
                backgroundColor: {
                  image:
                    "",
                },
              },
            },
          },
          itemStyle: {
            normal: {
              barBorderRadius: [0, 30, 30, 0],
              color: function (item) {
                return colorData[item.dataIndex];
              },
            },
          },
          barWidth: 20,
          data: [400, 600, 1000, 500, 500, 600],
        },
      ],
    };
    myChart.setOption(option);
    setTimeout(() => {
      this.spinning = false;
    }, 1000);
  },
};
</script>

<style lang="less" scoped>
td {
  // max-width: 100px;
  min-height: 120px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 20px;
}
th {
  background-color: #e8e8e8;
  border-right: 1px solid #fff;
  text-align: center;
  font-size: 16px;
  color: #333333;
  height: 40px;
}
.status {
  background-color: #e4fef9;
  padding: 5px 10px;
  text-align: center;
  color: #36e2c3;
  border-radius: 5px;
}
.people {
  width: 100%;
  display: flex;
  align-items: center;
}
</style>